<template lang="html">
  <div class="text-group">
    <textarea name="name" rows="8" v-model='fontText' @blur='changeParentsData' v-html='fontText'></textarea>
    <div class="font-radio--group">
      <span>字体大小</span>
      <el-radio-group v-model="fontSize" @change='changeParentsData'>
        <el-radio :label="18">大</el-radio>
        <el-radio :label="14">中</el-radio>
        <el-radio :label="12">小</el-radio>
      </el-radio-group>
    </div>
    <div class="">
      <span>颜色</span>
      <input type="color" v-model="fontColor">
    </div>
  </div>
</template>

<script>
export default {
  props: [
    'texts'
  ],
  data () {
    return {
      fontSize: +this.texts.font_size || 14,
      fontColor: this.texts.font_color || '#333333',
      fontText: this.texts.font_text
    }
  },
  watch: {
    fontColor (newValue, oldValue) {
      this.changeParentsData()
    },
    texts () {
      this.fontSize = +this.texts.font_size || 14
      this.fontColor = this.texts.font_color || '#333333'
      this.fontText = this.texts.font_text
    }
  },
  methods: {
    changeParentsData () {
      this.$emit('upText', {font_size: this.fontSize, font_color: this.fontColor, font_text: this.fontText.replace(/\n/g, '<br/>').replace(/\s/g, '&nbsp;')})
    }
  }
}
</script>

<style lang="less">
textarea{
  width: 100%;
}
.font-radio--group{
  padding: 15px 0;
}
</style>
